<script setup>
import { ref } from 'vue'
import { reqGetSkuList, reqDeleteSku, reqOnSale, reqCancelSale, reqGetSkuById } from '@/api/sku'
import { Top, Bottom } from '@element-plus/icons-vue'
const skuTableData = ref([])

const page = ref(1)
const limit = ref(10)
const total = ref(0)
// 获取sku列表
const getSkuList = async () => {
  const res = await reqGetSkuList(page.value, limit.value)
  if (res.code === 200) {
    skuTableData.value = res.data.records
    total.value = res.data.total
  }
}
getSkuList()
// 分页改变
const handleCurrentChange = (val) => {
  page.value = val
  getSkuList()
}
// 每页个数改变
const handleSizeChange = (val) => {
  page.value = 1
  limit.value = val
  getSkuList()
}

// 删除sku
const deleteSku = async (skuId) => {
  const res = await reqDeleteSku(skuId)
  if (res.code === 200) {
    getSkuList()
    ElMessage({
      type: 'success',
      message: '删除成功'
    })
  }
}

// 上架sku
const onSaleSku = async (row) => {
  const res = await reqOnSale(row.id)
  if (res.code === 200) {
    getSkuList()
    ElMessage({
      type: 'success',
      message: '上架成功'
    })
  }
}

// 取消上架sku
const onCancelSaleSku = async (row) => {
  const res = await reqCancelSale(row.id)
  if (res.code === 200) {
    getSkuList()
    ElMessage({
      type: 'success',
      message: '下架成功'
    })
  }
}

const checkForm = ref({})
const drawer = ref(false)
// 查看sku
const checkSku = async (skuId) => {
  drawer.value = true
  const res = await reqGetSkuById(skuId)
  if (res.code === 200) {
    checkForm.value = res.data
  }
}
</script>

<template>
  <el-card>
    <el-table border :data="skuTableData" style="width: 100%">
      <el-table-column type="index" label="序号" width="100" />
      <el-table-column prop="skuName" label="名称" />
      <el-table-column prop="skuDesc" label="描述" />
      <el-table-column label="默认图片">
        <template #default="{ $indexedDB, row }">
          <img :src="row.skuDefaultImg" alt="" style="width: 100px; height: 100px" />
        </template>
      </el-table-column>
      <el-table-column prop="weight" label="重量" />
      <el-table-column prop="price" label="价格(元)" />
      <el-table-column label="操作" fixed="right" width="400">
        <template #default="{ $indexedDB, row }">
          <el-button type="warning" v-if="row.isSale === 0" @click="onSaleSku(row)">
            上架<el-icon class="el-icon--right">
              <Top />
            </el-icon>
          </el-button>
          <el-button type="info" v-else @click="onCancelSaleSku(row)">
            下架<el-icon class="el-icon--right">
              <Bottom />
            </el-icon>
          </el-button>
          <el-button type="primary" @click="checkSku(row.id)">查看</el-button>
          <el-button type="success">修改</el-button>
          <el-button type="danger" @click="deleteSku(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-pagination v-model:current-page="page" v-model:page-size="limit" :page-sizes="[10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </el-card>

  <!-- 抽屉 -->
  <el-drawer v-model="drawer" title="sku详情" direction="rtl">
    <el-form label-width="80px" :model="checkForm">
      <el-form-item label="名称">{{ checkForm.skuName }}</el-form-item>
      <el-form-item label="描述">{{ checkForm.skuDesc }}</el-form-item>
      <el-form-item label="价格">{{ checkForm.price }}</el-form-item>
      <el-form-item label="平台属性">
        <div style="display: flex; gap: 10px 10px;flex-wrap: wrap;">
          <el-tag v-for="(item, index) in checkForm.skuAttrValueList" :key="index" type="primary">{{ item.attrName }}</el-tag>
        </div>
      </el-form-item>
      <el-form-item label="销售属性">
        <div  style="display: flex; gap: 0 10px;">
          <el-tag v-for="(item, index) in checkForm.skuSaleAttrValueList" :key="index" type="primary">{{ item.saleAttrName }}</el-tag>
        </div>
      </el-form-item>
      <el-form-item label="商品图片">
        <el-carousel trigger="click"  height="350px">
          <el-carousel-item v-for="item in 3" :key="item" style="width: 300px;">
            <img src="http://139.198.127.41:9000/sph/20240516/xiaoxin.jpg" alt="" style="width: 100%; height: 100%" />
          </el-carousel-item>
        </el-carousel>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<style scoped lang="scss">
.example-pagination-block + .example-pagination-block {
  margin-top: 10px;
}

.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
}
.el-carousel{
  width: 100%;
}
// .el-carousel__item:nth-child(2n) {
//   background-color: #99a9bf;
// }

// .el-carousel__item:nth-child(2n + 1) {
//   background-color: #d3dce6;
// }
</style>
